<template>
  <view class="goods-coupon">
    <view class="coupons-left">
      <view class="coupons-c">
        <view></view>
        <view></view>
        <view></view>
        <view></view>
        <view></view>
        <view></view>
        <view></view>
      </view>

      <view class="coupons-middle-c">
        <view></view>
        <view></view>
      </view>

      <!-- money: 0, coupons: 0.8, limitMoney: 0, freePostage: false, -->

      <view class="coupons-money" v-if="coupon.category === constValue.Coupon.key">
        <view class="coupons-money-first">{{ coupon.discount }}元</view>
        <view class="coupons-money-second">满{{ coupon.limit_price }}元可用</view>
      </view>

      <view class="coupons-money" v-if="coupon.category === constValue.Discount.key">
        <view class="coupons-money-first">{{ coupon.discount * 10 }} 折</view>
      </view>

      <view class="coupons-money" v-if="coupon.category === constValue.Shipping.key">
        <view class="coupons-money-first">{{ coupon.free_postage === true ? '包邮券' : '包邮券未知错误' }}</view>
      </view>
    </view>
    <view class="coupons-right">
      <view class="coupons-flag">券</view>
      <view class="top">
        <view class="coupons-name">{{ coupon.name }}</view>
        <view class="coupons-details">限{{ coupon.coupon_type.name }}使用</view>
      </view>

      <view class="bottom" v-if="userCoupon == null">
        <view class="coupons-validityPeriod">有效期：{{ coupon.expire_time }}天</view>
        <view class="coupons-validityPeriod" v-if="coupon.surplus_count != null">剩余：{{ coupon.surplus_count }}</view>
      </view>

      <view class="bottom" v-else>
        <view class="coupons-validityPeriod">有效期至：{{ formatTime(userCoupon.expire_time) }}</view>
      </view>

      <view class="button-ctrl">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { formatTime } from '../../utils/formatDate'
export default {
  props: {
    coupon: {
      type: Object,
      // default: {
      //   id: 0,
      //   name: '无',
      //   details: '无', // 使用限制等
      //   money: 0,
      //   coupons: 0,
      //   limitMoney: 0,
      //   freePostage: false,
      //   points: 0,
      //   stock: 0,
      //   category: '',
      //   createTime: '',
      //   validityPeriod: 0 // 有效期限按天计算
      // }
      default: {
        id: '',
        coupon_type: {
          name: ''
        },
        discount: '',
        expire_time: '',
        limit_price: '',
        name: '',
        surplus_count: '',
        total_count: ''
      }
    },
    userCoupon: {
      type: Object,
      default: null
    }
  },
  watch: {
    userCoupon: {
      handler(n, o) {
        console.log(n, o)
      },
      deep: true
    }
  },

  data() {
    return {
      constValue: {},
      formatTime
    }
  },
  async mounted() {
    // console.log(localStorage.getItem('constValue'))

    // 获取常量
    const { data: res } = await uni.request({
      url: this.$domain.data + '/const'
    })

    this.constValue = res.const

    // console.log(this.userCoupon)
    // console.log(this.constValue)
    // console.log(this.coupon)
  }
}
</script>

<style scoped lang="scss">
.goods-coupon {
  // background-color: #ffffff;
  // padding: 20px;
  // border-radius: 10px;
  // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  // display: flex;
  // align-coupons: center;
  // gap: 20px;

  overflow: hidden;
  width: 100%;
  height: 230upx;
  display: flex;
  justify-content: center;
  // align-coupons: center;

  .coupons-left {
    background-color: #fe6b35;
    flex: 6;
    height: 100%;
    display: inline-block;
    position: relative;
    display: flex;
    justify-content: center;
    // align-coupons: center;
    flex-direction: column;

    .coupons-money {
      color: #fff;
      text-align: center;

      .coupons-money-first {
        font-size: 50upx;
        font-weight: 900;
      }

      .coupons-money-second {
        font-size: 25upx;
      }
    }

    .coupons-c {
      position: absolute;
      left: -15upx;
      view {
        margin-top: 5upx;
        width: 28upx;
        height: 28upx;
        background-color: #ffffff;
        border-radius: 50%;
      }
    }

    .coupons-middle-c {
      width: 40upx;
      height: 100%;
      position: absolute;
      right: -20upx;
      z-index: 2;

      view {
        position: absolute;
        width: 100%;
        background-color: #f5f5f5;
        border-radius: 50%;
        height: 40upx;
      }

      view:first-child {
        top: -20upx;
      }

      view:last-child {
        bottom: -20upx;
      }
    }
  }

  .coupons-right {
    display: inline-flex;
    background-color: #fff;
    flex: 9;
    height: 100%;
    padding-left: 30upx;
    justify-content: space-around;
    flex-direction: column;
    position: relative;

    .top,
    .bottom {
      position: relative;
      z-index: 1;
    }

    .top {
      .coupons-name,
      .coupons-details {
        color: #ff5722;
      }

      .coupons-name {
        font-size: 35upx;
        margin-bottom: 5upx;
      }
      .coupons-details {
        font-size: 30upx;
      }
    }

    .bottom {
      display: flex;

      .coupons-validityPeriod {
        color: #6e6e6e;
        font-size: 25upx;
        margin-right: 20upx;

        // font-weight: 900;
      }
    }

    .coupons-flag {
      width: 170upx;
      height: 170upx;
      border-radius: 50%;
      // background-color: #d32424;
      border: 10upx solid #feebee;
      color: #feebee;
      position: absolute;
      transform: rotate(-15deg);

      display: flex;
      justify-content: center;
      align-coupons: center;
      font-size: 90upx;
      bottom: -50upx;
      right: -50upx;
    }

    .button-ctrl {
      position: absolute;
      width: 10upx;
      height: 10upx;
      z-index: 7;

      display: flex;
      justify-content: flex-end;
      align-items: center;
      right: 20upx;
    }
  }
}
</style>
